<template>
  <div :id="id" :style="style"></div>
</template>
<script>
export default {
  name: "Chart",
  data() {
    return {
      //resultdata:[],
      //echarts实例
      chart: ""

    };
  },
  props: {
    //父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    option: {
      type: Object,
      //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      //使用闭包保证一个vue实例拥有自己的一份props
      default() {
        return {
          title: {
            text: "加班报销金额折线图"
          },
          legend: {
            data: ["加班报销金额"]
          },
          xAxis: {
            data: ["创新中心", "研发中心", "直属事业部", "职能部门", "政府行业部", "军工行业部"]
          },
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "报销金额",
              //type: "bar",
              type: "line",
              data: [5000, 20000, 36000, 100000, 110000, 700000],
               //data: seriesData
              itemStyle:{
                normal: {
                color: 'blue', //线条颜色 
                label: { // 在柱形图上显示具体数据
                    show: true,
                    position: 'top', // 所在的位置
                    textStyle: { // 数据展示的样式
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: 'skyblue'
                    }
                },
            }
             }
            }
          ]
        };
      }
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
        
      };
    }
 
  },
  mounted() {
    this.init();
    //this.drawLine();
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.option);
      /* 图表跟随窗口大小自适应 */
      window.addEventListener("resize", this.chart.resize);
    },
//      drawLine(){
//         let myChart = this.$echarts.init(document.getElementById(this.id));
//         let _this = this
//         myChart.setOption({
//           title: {
//             text: "加班报销金额折线图"
//           },
//           legend: {
//             data: ["加班报销金额"]
//           },
//           xAxis: {
//             data: ["创新中心", "研发中心", "直属事业部", "职能部门", "政府行业部", "军工行业部"]
//           },
//           yAxis: [
//             {
//               type: "value"
//             }
//           ],
//           series: [
//             {
//               name: "报销金额",
//               type: "line",
//               data: seriesData
//             }
//           ]
//         });
//          this.getRequest("/expense/chart").then(resp=> {
//          if (resp && resp.status == 200) {
//              /* _this.seriesData = resp.data;  */
//              let chartData = resp.data;
//             let seriesData = [];
//             chartData.forEach(function(item){
//             let outObj = {};
//             let valueKey = Object.keys(item);
//             outObj.name = item[valueKey[0]];
//             outObj.value = valueKey[0];
//             seriesData.push(outObj);
// }); 
//           }
//         })

//       }
     /*  loadSeriesData(){
        var _this = this;
        this.getRequest("/expense/chart").then(resp=> {
         if (resp && resp.status == 200) {
            _this.resultdata = resp.data;
          
          }
        })
      }  */
    //在Chart.vue中加入watch
/*   watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
            this.init();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  } */

  }
};
</script>